//@flow

/**
 * 广告倒计时组件
 */

import React, { Component } from 'react';
import { 
    View,
    Text,
    TouchableOpacity,
    Animated,
    ViewStyle,
 } from 'react-native';
import { safeAreaHOC } from '../../base/safeAreaHOC';

export type Props = {
    timeLong : number,//单位秒
    style	 : ViewStyle,
    onPlayEnd: ()=>{},//广告播放结束
}
export type State = {
    currentProgress	    :Animated.Value,//已经播放时间长度
}
/**“跳过广告字段容器宽度/高度” */
const CONTAINER_WIDTH :number = 80;
const CONTAINER_HEIGHT:number = 25;
const PRE_LOAD_INSTR  :string = '在wifi条件下加载'

class ADCountDown extends Component <Props,State>{
    /**初始化state */
    state :State = {
        currentProgress:new Animated.Value(0),
    }
    /**开始动画 */
    startAnimated(timeLong:number){
        Animated.timing(
            this.state.currentProgress,
            {
                toValue:CONTAINER_WIDTH,
                duration:timeLong*1000
            }
        ).start(this.props.onPlayEnd)
    }
    /**生命周期 */
    componentDidMount(){
        this.startAnimated(this.props.timeLong)
    }
    render(){
        return (
            <TouchableOpacity style={[{flexDirection:'row',
                           alignItems:'center'},
                          {...this.props.style}]}>
                <View>
                    <Text style={{textShadowOffset:{width:1,height:1},color:'white',textShadowRadius:2,textShadowColor:'black'}}>{PRE_LOAD_INSTR}</Text>
                </View>
                <View style={{
                    width:CONTAINER_WIDTH,
                    height:CONTAINER_HEIGHT,
                    borderRadius:CONTAINER_HEIGHT/2,
                    overflow:'hidden',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                }}>
                    {/* 进度条组件 */}
                    <Animated.View
                        style={{
                            width:this.state.currentProgress,
                            height:'100%',
                            backgroundColor: 'rgba(0,204,255,0.5)',
                        }} />
                    {/* 文本显示：“跳过广告” */}
                    <View style={{
                        position:'absolute',
                        width:'100%',
                        height:'100%',
                        alignItems:'center',
                        justifyContent:'center'
                    }}>
                        <Text style={{color:'white'}}>跳过广告</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

ADCountDown = safeAreaHOC(ADCountDown,'top')
export {ADCountDown}